import React from 'react';
import {Accordion} from 'weaver-mobile';

class WrAccordion extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeKey: "0"
        };
    }

    componentWillMount() {
        this.setState({activeKey: this.props.activeKey})
    }

    onChange = (e) => {
        this.setState({activeKey: e})
    }

    render() {
        const prefixClass = 'wea-workrelate-mobile-accordion-';
        const {classStyle} = this.props;
        return (
            <div className={`${prefixClass}container ${classStyle}`}>
                <Accordion activeKey={this.state.activeKey} accordion className="my-accordion" onChange={this.onChange}>
                    <Accordion.Panel
                        header={<div className={`${prefixClass}header-title`}>
                            <div className={`${prefixClass}header-title-icon`}></div>
                            <span className={`${prefixClass}header-title-text`}>{this.props.title}</span>
                        </div>}
                        className="pad">
                        {this.props.children}
                    </Accordion.Panel>
                </Accordion>
            </div>
        );
    }
}

WrAccordion.defaultProps = {
    title: '默认标题',
    activeKey: "0"

}
export default WrAccordion;
